var path = require('path')
var webpack = require('webpack')
var HtmlWebpackPlugin = require('html-webpack-plugin')
module.exports = {
  entry:'./src/index.js',  //指定被打包文件
  mode:'development',
  output:{
    path:path.resolve(__dirname,'dist'),
    filename:'bundle.js'
  },
  plugins:[
    new HtmlWebpackPlugin({ //插件调用与配置
      title:'React App',
      filename:'index.html',
      template:'./public/index.html'  //指定参考模板
    }),
    new webpack.ProvidePlugin({  //解决React is  undefined问题
        "React": "react",
    }),
  ],
  module: {
    rules: [  //loader的编译规则
      {
        test: /\.(js|jsx)$/,  //指定被编译文件类型
        exclude: /node_modules/,  //排除不需要编辑的文件目录
        use: {
          loader: "babel-loader",  //指定编译使用的loader
          options: {
            presets: ['@babel/preset-react'],  //指定loader编译需要的预设
            plugins:[
              ["@babel/plugin-proposal-class-properties",{"loose":true}]
            ]
          }
        }
      },
      {
        test: /\.css|scss$/,
        use: [ 'style-loader', 'css-loader' ]
      }
    ]
  },
  devServer:{
    port:8080,
    open:true
  }
}